import React, { Component } from 'react'
import { Route, Switch, Link, withRouter } from 'react-router-dom'
// SwitchTransition 切换过渡 它下面的CSSTransition中的in属性更换为key属性，key唯一
import { CSSTransition, SwitchTransition } from 'react-transition-group'
import './style/animate.css'

import Home from './views/Home'
import About from './views/About'

@withRouter
class App extends Component {
  render() {
    return (
      <div>
        <Link to="/home">Home</Link> --
        <Link to="/about">About</Link>
        <hr />
        {/* in-out先进入再退场，out-in先退场再进场 */}
        {/* <SwitchTransition mode="in-out"> */}
        <SwitchTransition mode="out-in">
          <CSSTransition key={this.props.location.pathname} timeout={300} classNames="fade" unmountOnExit>
            <Switch>
              <Route path="/home" component={Home} />
              <Route path="/about" component={About} />
            </Switch>
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}

export default App
